<template>
	<view class="container" :style="{height:`calc(100vh - ${height}px)`}">
		<Header back title="展商详情"></Header>
		<view class="wapper">
			<div class="header">
				<image :src="bannerList[0]"  style="width:100%" mode="widthFix"></image>
			</div>
			<div class="content">
				<div class="title"><span>{{data.ZhangShangName}}</span></div>
				<div class="desc">
					<div class="desc-title">公司简介</div>
					<div class="desc-content" v-html="data.Content"></div>
				</div>
				<div class="pics">
					<div class="pics-title">展商现场</div>
					<div class="pics-content">
						<image :src="getUrl(v.ImageUrl)" mode="" v-for="(v,k) in pics" :key="k"
							@click="preview(getUrl(v.ImageUrl))"></image>
					</div>
				</div>
			<!-- 	<div class="pics">
					<div class="pics-title">产品展示</div>
					<div class="pics-content">
						<image :src="getUrl(v.ImageUrl)" mode="" v-for="(v,k) in pros" :key="k"
							@click="toDetail(v)"></image>
					</div>
				</div> -->
				<div class="comment">
					<div class="comment-title">
						<div class="left">在线咨询</div>
						<div class="right" @click="toWrite">写留言</div>
					</div>
					<template v-if="list.length > 0">
						<!-- <div class="comment-content">
							<div class="comment-item" v-for="(v,k) in list" :key="k">
								<div class="comment-item-left">
									<image :src="v.UserHeaderUrl ? v.UserHeaderUrl : '../../static/icons/avatar.png'" mode="widthFix"></image>
								</div>
								<div class="comment-item-right">
									<div class="comment-item-right-top">{{v.UserName}}</div>
									<div class="comment-item-right-bottom">{{v.Message}}</div>
								</div>
							</div>
						</div> -->
						<commentVue :list="list"  @reply="reply"></commentVue>
					</template>
					<u-empty v-else text="暂无留言" style="margin-top: 100rpx;"></u-empty>
					<u-popup :show="show" @close="close" mode="bottom">
						<div class="pop-container">
							<div class="top">写留言</div>
							<div class="pop-content">
								<textarea type="text" v-model="comment" />
							</div>
							<div class="btns">
								<u-button type="info" text="取消" @click="close"></u-button>
								<u-button type="primary" text="留言" @click="submit"></u-button>
							</div>
						</div>
					</u-popup>
				</div>
			</div>
		</view>

	</view>
</template>

<script>
	import Header from '@/components/haeder.vue'
	import commentVue from './comment.vue'
	import banner1 from '@/static/banner/banner1.png'

	function arr2tree(arr) {
		if (!Array.isArray(arr) || !arr.length) return [];
		let map = {};
		arr.forEach((item) => (map[item.MessageID] = item));

		let roots = [];
		arr.forEach((item) => {
			const parent = map[item.ParentMessageID];
			if (parent) {
				(parent.children || (parent.children = [])).push(item);
			} else {
				roots.push(item);
			}
		});
		return roots;
	}
	export default {
		components: {
			Header,
			commentVue
		},
		data() {
			return {
				height: 0,
				data: '',
				title: '详情',
				bannerList: [],
				user: '',
				list: [],
				show: false,
				comment: '',
				pics: [],
				pros: [],
				parentID:''
			}
		},
		methods: {
			preview(v) {
				uni.previewImage({
					urls: [v]
				})
			},
			reply(v){
				console.log(v)	
				this.comment = ''
				this.parentID = v.MessageID
				this.show = true
			},
			async getComment() {
				let res = await this.$api.getCompanyComment({
					ChangShangID: this.data.ZhangShangID,
					openid: this.user.OpenID,
					PageSize:9999,
					PageIndex:1
				})
				this.list = res.UserData ? arr2tree(res.UserData) : []
				// [{
				// 		"MessageID": 3,
				// 		"OpenID": "oF0KA6by99aM7K9-YDR_2uLuNbs8", //  留言/回复人的 openid
				// 		"UserName": "有点飘",
				// 		"UserHeaderUrl": "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTI9nFJ80oiakdD5csQnicFN6HeLu01icopIM0ngicMBZezRmp7vDChuJoAjeJiawK7HTrk1CsGgmZ37H3Q/132",
				// 		"Message": "回复测试测试",
				// 		"CreateTime": "2023-05-20T17:00:33.09",
				// 		"ChangShangID": 31,
				// 		"ChangShangName": "五粮液",
				// 		"ParentMessageID": 1,
				// 		"Is_Recived": 1 //留言类型   是否是回复
				// 	},
				// 	{
				// 		"MessageID": 1,
				// 		"OpenID": "zsc",
				// 		"UserName": "测试用户zsc",
				// 		"UserHeaderUrl": null,
				// 		"Message": "测试测试",
				// 		"CreateTime": "2023-05-20T16:42:24.533",
				// 		"ChangShangID": 31,
				// 		"ChangShangName": "五粮液",
				// 		"ParentMessageID": 0,
				// 		"Is_Recived": 0 //留言类型   0 表示当前信心是主动发送 不是别人回复的
				// 	}
				// ]

			},
			toWrite() {
				this.parentID = ''
				this.comment = ''
				this.show = true
			},
			close() {
				this.comment = ''
				this.show = false
			},
			async submit() {
				let res = await this.$api.comment({
					openid: this.user.OpenID,
					ChangShangID: this.data.ZhangShangID,
					Message: this.comment,
					ParentMessageID:this.parentID
				})
				if (res.Status == 0) {
					this.getComment()
					this.show = false

				} else {
					uni.$u.toast(res.Message)
				}
			},
			async getInit() {
				let r = await this.$api.getCompanyDetail({
					ChangShangID:this.data.ZhangShangID
				})
				this.data = r.UserData
				this.bannerList = [this.getUrl(this.data.ImageUrl)]
				let res = await this.$api.getCompanyPic({
					ChangShangID: this.data.ZhangShangID,
					PageSize:999,
					PageIndex:1
				})
				this.pics = res.UserData
				let res2 = await this.$api.getCompanyPro({
					ChangShangID: this.data.ZhangShangID,
					PageSize:999,
					PageIndex:1
				})
				this.pros = res2.UserData
				
			},
			toDetail(v){
				const str = encodeURIComponent(JSON.stringify({img:v.ImageUrl,head:v.ZhanPinName||v.ZiXunTitle,content:v.Content}))
				uni.navigateTo({
					url: '../index/detail?title=资讯详情&data='+str
				})
			}
		},
		onLoad(e) {
			this.data = JSON.parse(decodeURIComponent(e.data))
		},
		mounted() {
			this.user = uni.getStorageSync('user')
			this.getComment()
			this.getInit()
		},
		created() {
			let app = uni.getSystemInfoSync();
			this.height = app.windowBottom
		}
	}
</script>

<style scoped lang="scss">
	.pop-container {
		padding: 20rpx;
		background-color: #e6e6e6;
		display: flex;
		flex-direction: column;

		.top {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #999999;
		}

		.pop-content {
			flex: 1;
			margin: 10rpx 0;

			textarea {
				background: #fff;
				border: none;
				resize: none;
				outline: none;
				width: 100%;
			}
		}

		.btns {
			text-align: right;
			display: flex;

		}
	}

	.container {
		width: 100vw;
		overflow: auto;
		display: flex;
		flex-direction: column;

		.wapper {
			flex: 1;
			background: #f2f2f2;
			z-index: 100;
			margin-top: -280rpx;

			.header {
				padding: 20rpx;
				box-shadow: 4rpx 4rpx 8rpx rgba(0,0,0,0.03);
			}

			.content {
				padding: 20rpx;

				.title {
					height: 50rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin: 20rpx 0;
					text-align: center;
					span{
						padding: 10rpx;
						color: #0c6cc1;
						border: 1px solid #000;
						box-shadow: 14rpx 14rpx 0rpx #0c6cc1;
					}
				}

				.desc {
					margin-top: 40rpx;
					border: 1px solid #000;
					padding: 20rpx;
					box-shadow: 14rpx 14rpx 0rpx #0c6cc1;
					.desc-title {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #333333;
					}

					.desc-content {
						margin-top: 20rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}

				.pics {
					border: 1px solid #000;
					
					margin-top: 40rpx;
					padding: 20rpx;
					box-shadow: 14rpx 14rpx 0rpx #0c6cc1;
					.pics-title {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #333333;
					}

					.pics-content {
						margin-top: 20rpx;
						display: flex;
						flex-wrap: wrap;

						image {
							width: 230rpx;
							height: 176rpx;
							margin-right: 10rpx;
							margin-bottom: 10rpx;

							&:nth-child(3n) {
								margin-right: 0;
							}
						}
					}
				}

				.pros {
					border: 1px solid #000;
					padding: 20rpx;
					margin-top: 40rpx;
					box-shadow: 14rpx 14rpx 0rpx #0c6cc1;
					.pros-title {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #333333;
					}

					.pros-content {
						margin-top: 20rpx;
						display: flex;
						flex-wrap: wrap;

						image {
							width: 230rpx;
							height: 176rpx;

							&:nth-child(3n) {
								margin-right: 0;
							}
						}
					}
				}

				.comment {
					margin-top: 40rpx;

					.comment-title {
						display: flex;
						justify-content: space-between;

						.left {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 800;
							color: #333333;
						}

						.right {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 800;
							color: #0c6cc1;
						}
					}





				}
			}
		}
	}
</style>